<template>
	<view>
		<!-- 	<view class="flex_sb h100  plr30 b-warning cf" v-show="info.depositState == 0">
			<text class="ft26">请先支付押金后再购买换电套餐</text>
			<view class="h50 lh50 plr24 bf warning border-r3" @click="buyComboFn"
				style="color: red;font-size: 50upx;font-weight: 700;transform: scale(0.95,1.2);">支付押金</view>
		</view> -->
		<view class="p30">
			<view class="plr24 pb30 bf border-r1">
				<view class="flex_sb h80 ft26 bdb">
					<text>换电柜编号：{{ info.deviceNo || '--' }}</text>
					<text>{{ info.operatorName }}</text>
				</view>
				<view class="h80"
					style="display: flex;justify-content: space-between;align-items: center;font-size: 12px;">
					<!-- <text>{{ info.siteName }}</text> -->
					<view class="h40 whn" style="display: flex;justify-content: flex-start;align-items: center;">
						<view class="flex_a w40 h40 whn">
							<image src="/static/ic_dw_2x.png" mode="widthFix"
								style="width: 22upx;height: 24upx;margin-right: 10upx;">
							</image>
						</view>
						<text class="c9">{{ info.address }}</text>
					</view>

					<text class="c9 ft26">{{ info.distance || '--' }}km</text>
				</view>
				<!-- <view class="flex mb10">
					<view class="flex_a w40 h40 whn">
						<image src="/static/ic_dw_2x.png" mode="widthFix" style="width: 22upx;height: 24upx;"></image>
					</view>
					<text class="c9">{{ info.address }}</text>
				</view> -->
				<view class="flex_sb h100 mb30 plr30 bgf5">
					<view class="flex_a">
						空闲仓位：
						<view class="green">{{ info.blankNum }}</view>
					</view>
					<view class="flex_a">
						可取仓位：
						<view class="warning">{{ info.availableNum }}</view>
					</view>
					<view class="flex_a">
						总仓位：

						<view class="ft30">{{ info.chanelNum }}</view>
					</view>
				</view>
				<view class="mb50 tae agent">
					<text>{{ info.agentName}}</text>
					<text v-if="info.depositState !== 0" class="plr10 primary" @click="packageMoneyFn">
						购买套餐
					</text>
					<text v-if="info.depositState == 0" class="plr10 primary"
						@click="routerLink({ path: '/pages/user/rentEle/package', query: { deviceNo: info.deviceNo,deviceId: info.deviceId, type: 2 ,} })">
						交付电池押金
					</text>
				</view>
				<!-- 换电 -->
				<view class="pt50 bdt-dashed ft26">
					<view class="mb30 plr24 ptb30 bgf5 border-r1" v-if="info.batteryReturnVo">
						<view class="flex_sb h80 bdb">
							<text>上次归还记录</text>
							<text>{{ info.batteryReturnVo.ctime  }}</text>
						</view>
						<view>
							<view class="flex_a h70">
								<text class="flex1">换电柜编号：{{ info.deviceNo || '' }}</text>
								<view class="w50 h50" @click="navigation">
									<image src="/static/daohang.png" mode="widthFix"
										style="width: 50upx;height: 50upx;"></image>
								</view>
							</view>
							<view class="h50">仓门号：{{ info.batteryReturnVo.oldCabinetNo }}</view>
							<view class="h50">电池编号：{{ info.batteryReturnVo.oldBatteryNo }}</view>
							<view class="c6">{{ info.batteryReturnVo.deviceAddress }}</view>
						</view>
					</view>
					<!--  -->
					<!-- mealState 用户套餐情况 1：已买套餐 0：未买套餐 -->
					<!-- rentState 租借状况 0.无电池（可租） 1. 有电池（可换或归还） -->
					<view class="mb60 plr24 ptb30 bgf5 border-r1" v-if="info.mealState == 1">
						<view class="h50">总换电次数：{{ info.nums ===-1 ? '无限' : info.nums }}次</view>
						<view class="h50">剩余换电次数：{{ info.num  ===-1 ? '无限' : info.num }}次</view>
						<view class="h50">套餐结束时间：{{ info.validityTime  }}</view>

						<view class="h50">当前电池编号：{{ info.rentState == 1 ? info.batteryNo : '未取电池' }}</view>
						<view class="h50">套餐电池类型：{{ info.btType }}V</view>
					</view>

					<view class="flex_aj">
						<view style="color: red;font-size: 40upx;font-weight: 700;transform: scale(0.95,1.1);"
							@click="packageMoneyFn">
							套餐续费
						</view>
					</view>

					<!-- <view class="flex_aj">
						<view style="color: red;font-size: 40upx;font-weight: 700;transform: scale(0.95,1.1);"
							@click="discountCouponFnss">
							领取优惠券
						</view>
					</view> -->
					<!-- <view class="flex_aj h100 lh100 tac c9" v-if="info.mealState == 0">
						您还未<text class="primary"
							style="color: red;font-size: 40upx;font-weight: 700;transform: scale(0.95,1.1);"
							@click="buyComboFn">购买套餐？</text>
					</view> -->
					<view v-if="loginUser" style="display: flex;justify-content: flex-end;margin-bottom: 10px;">
						<view @click="MyMoneyFn">
							跳到 <text class="primary">我的钱包</text> 充值
						</view>
					</view>

					<view>
						<u-modal v-model="buyShow" ref="uModal" :async-close="true" title="电池押金交付"
							:title-style="{color: 'red'}" :mask-close-able="true" confirm-text="交付押金" :zoom="true"
							:show-cancel-button="true" @confirm="buyConfirm">
							<view class="slot-content"
								style="text-align: center;margin-top: 20upx;margin-bottom: 20upx;">
								<rich-text :nodes="buyContent"></rich-text>
								<!-- 	<u-radio-group v-model="buyValue" style="position: relative;left: 17%;">
									<u-radio @change="buyRadioChange" v-for="(item, index) in buyList" :key="item.id"
										:name="item.voltage" :disabled="item.disabled">
										{{item.voltage}}
									</u-radio>
								</u-radio-group> -->
								<view style="display:flex;justify-content:space-around;margin-top: 20upx;">
									<view style="display: inline-block;" v-for="(item, index) in buyList" :key="item.id"
										@click="buyRadioChange(item)">
										<button :class="item.voltage==Number(buyValue) ? 'bluesss' :''" class="blueaaa">
											{{ item.voltage }}
										</button>
									</view>
								</view>
							</view>
						</u-modal>
					</view>

				</view>

				<!-- 没登录时--显示登录 -->
				<view class="pt20" v-if="!loginUser" style="margin-top: 50rpx;">
					<view class=" mb50 plr30">
						<button class="btn-box" open-type="getAuthorize" scope="userInfo"
							@getAuthorize="thirdLogin">登录购买套餐</button>
					</view>
				</view>

				<!-- 租电 :disabled="info.mealState == 0 || info.depositState == 0" -->
				<view class="pt20" v-if="info.rentState == 0">
					<view class=" mb50 plr30">
						<u-button type="primary" shape="circle" throttle-time="2000" @click="xinxitixing">
							{{ info.batteryReturnVo ? '开启仓门取电' : '开始租电' }}
						</u-button>
					</view>
					<!-- <view class="" @click="anniu">
						按钮
					</view> -->
					<!-- <view class="plr24 ptb24 bd" v-show="info.instructions">

						<view class="c6">
							<u-parse :html="info.instructions"></u-parse>
						</view>
					</view> -->
				</view>


				<view v-if="info.rentState == 1">
					<view class="mb50 plr30">
						<u-button type="primary" throttle-time="2000" shape="circle"
							@click="routerLink({ path: '/pages/user/rentEle/batteryChange', query: { deviceId: info.deviceId, backFlag: 0 } })">
							更换电池
						</u-button>
					</view>
					<!-- <u-button type="primary" plain shape="circle" throttle-time="2000"
						@click="routerLink({ path: '/pages/user/rentEle/batteryChange', query: { deviceId: info.deviceId, backFlag: 1 } })">
						归还电池
					</u-button> -->
				</view>

			</view>
		</view>
		<!--查询用户是否有逾期订单模态框 -->
		<view class="">
			<u-modal v-model="isOverdueLists" title="逾期订单" @confirm="confirms" @cancel="cancels" cancel-color="red"
				:title-style="{color: 'red'}" :show-cancel-button="true" :mask-close-able="true" confirm-text="支付逾期订单"
				:cancel-text="cancelText">
				<view class="slot-content" style="text-align: center;">
					<rich-text :nodes="isOverdueListContents"></rich-text>
				</view>
			</u-modal>
		</view>
		<!-- 电池租赁协议 -->
		<u-popup v-model="showPhone" mode="left" border-radius="14" :closeable="true" width="100%" height="100%">
			<view class=" plr30 pb30">
				<view
					style="text-align: center;color: black;margin-top: 8%;font-weight: 700;font-size: 30upx;margin-bottom: 5%;">
					电池租赁协议
				</view>
				<view style="text-align: left;margin-bottom: 5%;margin-top: 15%;overflow-y: auto;">
					<u-parse :html="signContent"></u-parse>
				</view>
				<view class="flex_aj h60 mb40">
					<u-radio-group v-model="sbuyValue" @change="radioGroupChange">
						<u-radio :disabled="zisdisabled" @change="radioChange" v-for="(item, index) in signList"
							:key="index" :name="item.name">
							<text class="c9">{{item.name}}</text>
							<text class="primary">《电池租赁协议》</text>
						</u-radio>
					</u-radio-group>
				</view>
				<view style="margin-bottom: 60upx;">
					<u-button :disabled="zisdisabled" type="primary" @click="signFn"><span
							v-if="zisdisabled">{{zcounts}}秒后可</span>签署</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 押金协议 -->
		<u-popup v-model="qshowPhone" mode="left" border-radius="14" :closeable="true" width="100%" height="100%">
			<view class=" plr30 pb30">
				<view
					style="text-align: center;color: black;margin-top: 8%;font-weight: 700;font-size: 30upx;margin-bottom: 5%;">
					押金协议
				</view>
				<view style="text-align:left;margin-bottom: 5%;margin-top: 10%;overflow-y: auto;">
					<u-parse :html="qsignContent"></u-parse>
				</view>
				<view class="flex_aj h60 mb40">
					<u-radio-group v-model="qbuyValue" @change="qradioGroupChange">
						<u-radio :disabled="isdisabled" @change="qradioChange" v-for="(item, index) in qsignList"
							:key="index" :name="item.name">
							<text class="c9">{{item.name}}</text>
							<text class="primary">《押金协议》</text>
						</u-radio>
					</u-radio-group>
				</view>
				<view style="margin-bottom: 60upx;">
					<u-button :disabled="isdisabled" type="primary" @click="qsignFn"><span
							v-if="isdisabled">{{counts}}秒后可</span>签署</u-button>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import payDeposit from '../mixins/payDeposit.js'
	import {
		protocol
	} from '@/api/public.js'
	import {
		scanDevice,
		scanNotLogin,
		getInfoByAppId,
		nextTake,
		batteryTypeList,
		isOverdue,
		pastUserMeal,
		settingExchange
	} from '@/api/user.js'
	export default {
		mixins: [payDeposit],
		data() {
			return {
				cancelText: "取消",
				loginUser: '',
				showPhone: false,
				zisdisabled: true,
				zcounts: 3,
				ztimer: null,
				isdisabled: true,
				counts: 3,
				timer: null,
				sbuyValue: '我已阅读并同意', //单选框值
				isRadio: false, //是否勾选并同意协议
				signList: [{ //单选框数组
					name: '我已阅读并同意'
				}],
				signContent: '',
				qshowPhone: false,
				qbuyValue: '我已阅读并同意', //单选框值
				qisRadio: false, //是否勾选并同意协议
				qsignList: [{ //单选框数组
					name: '我已阅读并同意'
				}],
				qsignContent: '',
				isOverdueLists: false,
				isOverdueListContents: '',
				query: {},
				info: {},
				btType: '',
				getInfoByAppIdObj: {},
				xinxi: [],
				buyShow: false,
				buyContent: '购买套餐前，请先交付电池押金!请选择你要交付押金的电池型号：',
				buyList: [{
						voltage: '48',
						disabled: false,
						id: 1,
					},
					{
						voltage: '60',
						disabled: false,
						id: 2,
					},
					{
						voltage: '72',
						disabled: false,
						id: 3,
					}
				],
				buyValue: '',
				batteryTypes: '',
			}
		},
		onLoad(e) {
			let qrCode = getApp().globalData.qrCode;
			let obj = {}
			if (e.deviceNo) {
				obj = e
			} else if (qrCode) {
				obj = this.getUrlParam(qrCode)
			}
			if (obj.deviceNo) {
				this.query = obj
				this.deviceNo = obj.deviceNo
			}
		},
		async onShow() {
			if (this.$store.state.user.userInfo.phone) {
				this.loginUser = this.$store.state.user.token
			} else {
				this.loginUser = ''
			}
			// 登录后---
			// 查询用户是否有逾期订单
			if (this.loginUser) {
				const userMeals = await isOverdue()
				this.isOverdueListContents = `你有逾期的订单，请去支付？`
				if (userMeals.data.isOverdue) {
					this.isOverdueLists = true
				} else {
					this.isOverdueLists = false
				}
				this.scanDevice()

			} else {
				this.scanNotLogin()
			}


			// console.log('this.query--', this.query);
			// console.log('res----', res);
			setTimeout(async () => {
				this.$store.commit('agentIdss', this.info.agentId)
				// 获取电池押金列表
				let id = wx.getStorageSync('oneData').agentId || ''
				const res1 = await batteryTypeList(id)
				this.buyList = []
				this.buyList = res1.rows
				if (res1.rows.length !== 0) {
					this.buyValue = res1.rows[0].voltage
				}
			}, 1000)
			this.buyContent = `
			购买套餐前，请先交付电池押金!<br>
			请选择你要交付押金的电池类型： <br>
			`


		},
		watch: {
			qshowPhone: {
				handler(newVal, oldVal) {
					// console.log('====', newVal, oldVal);
					// 如果是打开关闭
					if (!newVal && oldVal) {
						clearInterval(this.timer)
						this.timer = null
						// this.qbuyValue = ''
						setTimeout(() => {
							this.isdisabled = true
							this.counts = 3
						}, 1000)
					}
				},
				deep: true
			},
			showPhone: {
				handler(newVal, oldVal) {
					// console.log('====', newVal, oldVal);
					// 如果是打开关闭
					if (!newVal && oldVal) {
						clearInterval(this.ztimer)
						this.ztimer = null
						// this.sbuyValue = '我已阅读并同意'
						setTimeout(() => {
							this.zisdisabled = true
							this.zcounts = 3
						}, 1000)
					}
				},
				deep: true
			},
		},
		methods: {
			getUrlParam(url) {
				let params = url.split("?")[1].split("&");
				let obj = {};
				params.map(v => (obj[v.split("=")[0]] = v.split("=")[1]));
				return obj
			},


			MyMoneyFn() {
				if (!this.loginUser) {
					this.toast('请登录后再使用')
					return false
				}
				this.routerLink({
					path: '/pages/user/wallet/index'
				})
			},
			packageMoneyFn() {
				if (!this.loginUser) {
					this.toast('请登录后再使用')
					return false
				}
				this.routerLink({
					path: '/pages/user/rentEle/package',
					query: {
						deviceNo: this.info.deviceNo,
						deviceId: this.info.deviceId,
						type: 2,
					}
				})
			},


			discountCouponFnss() {
				this.routerLink({
					path: '/pages/user/workingStorage/discountCoupon',
					query: {
						mealState: this.info.mealState,
						deviceId: this.info.deviceId,

					}
				})
			},

			// 逾期订单--购买套餐
			cancels() {
				if (this.cancelText == "购买套餐") {
					this.routerLink({
						path: '/pages/user/rentEle/package',
						query: {
							deviceId: this.info.deviceId,
							deviceNo: this.info.deviceNo,
							agentId: this.info.agentId,
							type: 2
						}
					})
				}
			},

			// 逾期订单--支付
			confirms() {
				console.log('22344');
				this.routerLink({
					path: '/pages/user/myOrder/overdueOrder',
				})
			},
			radioChange(e) {
				// console.log('2222', e);
			},
			radioGroupChange(e) {
				// console.log('5555', e);
			},
			signFn() {
				console.log('8888', this.sbuyValue);
				if (this.sbuyValue === '我已阅读并同意') {
					this.isRadio = true //勾选协议成功
					this.toast('你签署《电池租赁协议》成功')
					setTimeout(() => {
						this.showPhone = false //关闭协议
						this.xinxitixing()
						this.isRadio = false
					}, 1500)
				} else {
					this.toast('请勾选我已阅读并同意《电池租赁协议》')
				}
			},
			qradioChange(e) {
				// console.log('2222', e);
			},
			qradioGroupChange(e) {
				// console.log('5555', e);
			},
			qsignFn() {
				console.log('8888', this.qbuyValue);
				if (this.qbuyValue === '我已阅读并同意') {
					this.qisRadio = true //勾选协议成功
					this.toast('你签署《押金协议》成功')
					setTimeout(() => {
						this.qshowPhone = false //关闭协议
						this.buyShow = true;
						// this.buyValue = ''
					}, 1500)
				} else {
					this.toast('请勾选我已阅读并同意《押金协议》')
				}
			},
			// async anniu() {
			// 	const res = await nextTake({
			// 		orderNo: 'ZD1000001170666343'
			// 	})
			// 	// this.nextTakess = res.data
			// 	// console.log('1111111111', this.nextTakess);
			// 	this.back(-1)
			// },
			async buyComboFn() {
				// 交了押金
				if (this.info.depositState == 1) {
					this.routerLink({
						path: '/pages/user/rentEle/package',
						query: {
							type: 2,
							deviceId: this.info.deviceId,
							deviceNo: this.query.deviceNo,
						}
					})
				} else { //没有交押金
					if (!this.qisRadio) { //如果没有签署协议，就打开弹框协议
						const zsa = await protocol({
							type: 1,
							appType: 2
						})
						this.qsignContent = zsa.data || '押金协议内容待更新！'
						this.qshowPhone = true
						this.timer = setInterval(() => {
							if (this.counts === 0) {
								clearInterval(this.timer)
								this.isdisabled = false
								return this.timer = null
							}
							this.counts = this.counts - 1
						}, 1000)
						return false
					} else {
						this.qshowPhone = false
						this.buyShow = true;
						// this.buyValue = ''
					}

				}

			},
			async buyConfirm() {
				if (!this.buyValue) {
					this.toast('请选择你要交付押金的电池类型')
					setTimeout(() => {
						// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
						this.$refs.uModal.clearLoading();
					}, 3000)
					return
				}
				console.log('5555555', this.buyValue);



				this.buyList.forEach((i) => {
					if (Number(this.buyValue) === i.voltage) {


						// this.buyValue = i.id
						this.confDeposit2(3, i.id, this.info.deviceId, this.query.deviceNo)
					}
				})
				this.buyShow = false;
				this.$refs.uModal.clearLoading();

			},
			// 选中某个单选框时，由radio时触发
			buyRadioChange(e) {
				this.buyValue = e.voltage
				console.log('e', e, this.buyValue);
			},

			async xinxitixing() {
				// 开始租电时执行
				// if (!this.info.batteryReturnVo) {
				// 	if (!this.isRadio) { //如果没有签署协议，就打开弹框协议
				// 		// 1. 租赁电池须知   2.租赁电池套餐协议
				// 		const vqq = await settingExchange({
				// 			queryType: 1
				// 		})
				// 		this.signContent = vqq.msg || '租赁电池协议内容待更新！'
				// 		this.showPhone = true
				// 		this.ztimer = setInterval(() => {
				// 			if (this.zcounts === 0) {
				// 				clearInterval(this.ztimer)
				// 				this.zisdisabled = false
				// 				return this.ztimer = null
				// 			}
				// 			this.zcounts = this.zcounts - 1
				// 		}, 1000)
				// 		return false
				// 	} else {
				// 		this.showPhone = false
				// 	}
				// }
				console.log('=============', this.info);
				// 该设备禁止租赁时
				if (this.info.rejectRent == 1) {
					this.toast('该设备已禁止租赁，如有疑问请咨询商家')
					return false
				}
				// 没交押金时
				if (this.info.depositState == 0) {
					this.toast('您还未选择押金,即将跳转押金...')
					setTimeout(async () => {
						this.routerLink({
							path: '/pages/user/rentEle/package',
							query: {
								deviceId: this.info.deviceId,
								deviceNo: this.info.deviceNo,
							}
						})
					}, 2000)
					return false
				}
				// 没交套餐时
				if (this.info.mealState == 0) {
					this.toast('您还未选择套餐,即将跳转套餐...')
					setTimeout(async () => {
						this.routerLink({
							path: '/pages/user/rentEle/package',
							query: {
								deviceId: this.info.deviceId,
								deviceNo: this.info.deviceNo,
							}
						})
					}, 2000)
					return false
				}

				// await this.getInfoByAppId()
				await this.subscribeMessage()
				this.routerLink({
					path: '/pages/user/rentEle/batteryChange',
					query: {
						deviceId: this.info.deviceId
					}
				})

			},
			// 消息订阅接口
			async getInfoByAppId() {
				this.xinxi = []
				const res = await getInfoByAppId({
					appId: my.getAppIdSync().appId
				})
				this.getInfoByAppIdObj = res.data
				// 获取value值 Object.values(this.getInfoByAppIdObj)
				// 便利value值成数组 this.xinxi
				let arrqq = Object.values(this.getInfoByAppIdObj)

				if (arrqq[0]) {
					this.xinxi.push(arrqq[0])
				}
				if (arrqq[1]) {
					this.xinxi.push(arrqq[1])
				}
				if (arrqq[2]) {
					this.xinxi.push(arrqq[2])
				}
				if (arrqq[3]) {
					this.xinxi.push(arrqq[3])
				}
				if (arrqq[4]) {
					this.xinxi.push(arrqq[4])
				}
				if (arrqq[5]) {
					this.xinxi.push(arrqq[5])
				}
				console.log(222222222222, this.xinxi);
			},
			// 订阅消息模板
			async subscribeMessage() {
				return new Promise((resolve, reject) => {
					uni.requestSubscribeMessage({
						tmplIds: this.xinxi,
						success: res => {
							console.log('消息订阅成功哦', res);
							resolve(res)
						},
						fail: err => {
							resolve(err)
							console.log('消息订阅失败哦', err)
						}
					})
				})
			},
			async scanDevice() {
				const res = await scanDevice(this.query)

				if (res.code !== 200) {
					return this.confirm({
						content: res.msg || '操作失败',
						showCancel: false
					}).then(res => {
						this.back()
					})
				} else {
					uni.setStorageSync('oneData', res.data)
					uni.setStorageSync('query', this.query)
					uni.setStorageSync('agentId', res.data.agentId)
				}
				this.info = res.data
				console.log('345', this.info);
				this.btType = res.data.btType
				if (this.info) {
					if (this.info.agentId && this.info.deviceNo && this.info.deviceId) {
						this.cancelText = "购买套餐"
					}
				}
			},

			async scanNotLogin() {
				const res = await scanNotLogin(this.query)
				if (res.code !== 200) {
					return this.confirm({
						content: res.msg || '操作失败',
						showCancel: false
					}).then(res => {
						this.back()
					})
				} else {
					uni.setStorageSync('oneData', res.data)
					uni.setStorageSync('query', this.query)
					uni.setStorageSync('agentId', res.data.agentId)
				}
				this.info = res.data
				// this.btType = res.data.btType
			},
			navigation() {
				uni.openLocation({
					latitude: this.info.batteryReturnVo.lat * 1,
					longitude: this.info.batteryReturnVo.lng * 1,
					// name: this.info.batteryReturnVo.siteName,
					address: this.info.batteryReturnVo.deviceAddress,
					success: () => {}
				})
			}
		}
	}
</script>

<style scoped>
	.agent {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btn-box {
		color: #fff;
		background-color: #3282FF;
		border-radius: 50rpx;

	}

	.blueaaa {
		background-color: #bdd5fb;
		padding-left: 26upx;
		padding-right: 26upx;
		font-size: 35upx;
		font-weight: 700;
		color: #fff;
	}

	.bluesss {
		background-color: #2974f3;
	}


	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
		margin-top: 16upx;
		line-height: 50upx;
		margin-bottom: 20upx;
		text-align: center;
	}

	.redColor {
		font-weight: 700;
		font-size: 40upx;
		color: red;

	}

	.redColors {
		display: inline-block;
		font-weight: 700 !importanta;
		font-size: 40upx !important;
		color: red !important
	}
</style>